<template>
	<view>
		<scroll-view class="scroll" scroll-x="true" v-if="type == 'scrollX'">
			<view class="scroll-view" >
				<view class="nav-title scroll-title" :class="navIndex == index?'nav-active':''"
					v-for="(item,index) in navList" @click="navFn(index)"
					:style="['top:'+(systemBarHeight+88)+'rpx;width:calc(100%/'+ navList.length +')',navList.length == 2?'width:172rpx':'']"
					style="margin-right: 20rpx;"
					>
				
					<text>
						{{text == 'text'?item.text:item.name}}
					</text>
					
				</view>
			</view>
		</scroll-view>
		<view class="nav" v-else>
			<view class="nav-title nav-width" :class="navIndex == index?'nav-active':''" v-for="(item,index) in navList"
				@click="navFn(index)"
				:style="['top:'+(systemBarHeight+88)+'rpx;width:calc(100%/'+ navList.length+')',navList.length == 2?'width:172rpx':'']">
				<text>
					{{item.text}}
				</text>
				<view v-show="item.showDot" :style="{marginBottom:'20rpx'}" class="redDot"></view>
			</view>
		</view>
		<view style="width: 100%;height: 80rpx;"></view>
	</view>
</template>

<script>
	export default {
		props: {
			navList: {
				type: Array
			},
			text: {
				type: String,
				default: 'text'
			},
			type: {
				type: String,
				default: ''
			},
			margin:{
				type:[String,Number],
				default:0,
			}
		},
		data() {
			return {
				navIndex: 0,
				systemBarHeight: 0,
			}
		},
		created() {
			//#ifndef H5
			this.systemBarHeight = plus.navigator.getStatusbarHeight() * 2; //状态栏高度
			//#endif
		},
		methods: {
			navFn(index) {
				this.navIndex = index
				this.$emit('current', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.redDot{
		display: inline-block;
		background-color: #F40;
		width:15rpx;
		height:15rpx;
		border-radius: 50%;
		margin-top: 10rpx;
		margin-left:3rpx;
	}
	.nav {
		display: flex;
		background-color: white;
		position: fixed;
		z-index: 1000;
		width: 100%;

	}

	.nav-title {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 500;
		
		color: #120000;
	}

	.scroll-title {
		min-width: 140rpx;
	}

	.nav-width {
		width: 172rpx;
	}

	.nav-active {
		// background: url(../../static/common/4822.png) no-repeat;
		background-size: 24rpx 15rpx;
		background-position: 50% 100%;
		color:#e23535;
		font-size: 32rpx;
		font-weight: 500;
	}

	.scroll {
		overflow: hidden;
		white-space: nowrap;
		background-color: white;
		position: fixed;
		z-index: 1000;
		// top: 92rpx;
		.scroll-view {
			display: flex;
		}
	}
</style>
